<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>DS_SaoDiSheng</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
        <link rel="stylesheet" href="css/font.css">
        <link rel="stylesheet" href="css/xadmin.css">
        <script src="lib/layui/layui.all.js" charset="utf-8"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/vue/2.5.16/vue.min.js"></script>
        <script src="js/axios/0.17.1/axios.min.js"></script>
        <script type="text/javascript" src="js/xadmin.js"></script>
    </head>
    <body>
    <script>
        <!--前后端交互层-->
        $(function () {
            var data4Vue = {
                uri: 'users',
                beans: [],
                bean: {id:0,name:'','address':''},
                pagination: {}
            };

            // ViewModel
            var vue = new Vue({
                el: "#workingArea",      // 关联作用域
                data: data4Vue,
                mounted:function () {// mounted表示这个Vue对象加载成功
                    this.list(0);       // 调用相应的功能
                },
                // 定义方法
                methods: {
                    list: function (start) {
                        var url = this.uri + "?start=" + start;      // 整理后台控制器的路径
                        axios.get(url).then(function (response) {
                            vue.pagination = response.data;     // 将数据传入分页中
                            vue.beans = response.data.content;      // 将分页的内容转成对象实例
                        });
                    },
                    add: function () {
                        if(!checkEmpty(this.bean.name, "用户名称"))
                            return;
                        if (!checkEmpty(this.bean.address, "用户地址"))
                            return;
                        var url = this.uri;
                        axios.post(url,this.bean).then(function(response){
                            vue.list(0);
                            vue.bean =  {id:0, name:'','address':''};
                        });
                    },
                    deleteBean: function (id) {
                        if (!checkDeleteLink())
                            return;
                        var url = this.uri + "/" + id;
                        axios.delete(url).then(function (response) {
                            if (0 != response.data.length)
                                alert(response.data);
                            else
                                vue.list(0);
                        });
                    },

                    edit: function(id) {
                        xadmin.open('用户编辑', 'user-edit.html', id, 600, 300)
                    },

                    detail: function(id) {
                        xadmin.open('用户订单', 'userorders.html', id, 1000, 500)
                    },

                    jump: function (page) {
                        jump(page, vue);        // 该页面跳转方法定义在functions.html中
                    },
                    jumpByNumber: function (start) {
                        jumpByNumber(start, vue);
                    }
                }
            });
        });
    </script>
        <div class="x-nav">
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid" id="workingArea">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form">
                              <thead>
                                <tr>
                                  <th>用户编号</th>
                                  <th>用户名称</th>
                                  <th>地址</th>
                                  <th>操作</th>
                              </thead>
                              <tbody>
                              <template v-for="bean in beans ">
                                  <tr>
                                      <td>{{bean.id}}</td>
                                      <td>{{bean.name}}</td>
                                      <td>{{bean.address}}</td>
                                      <td class="td-manage">
                                          <a @click="edit(bean.id)">编辑</a>
                                          <a @click="deleteBean(bean.id)" href="#nowhere">删除</a>
                                          <a @click="detail(bean.id)">查看</a>
                                      </td>
                                  </tr>
                              </template>
                              </tbody>
                            </table>
                            <div class="pagination">
                                <ul class="pagination">
                                    <li :class="{ disabled: pagination.first }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                        <a  href="#nowhere" @click="jump('first')">«</a>
                                    </li>
                                    <li :class="{ disabled: !pagination.hasPrevious }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                        <a  href="#nowhere" @click="jump('pre')">‹</a>
                                    </li>

                                    <li  v-for="i in pagination.navigatepageNums" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                        <a href="#nowhere" @click="jumpByNumber(i-1)" >
                                            {{i}}
                                        </a>
                                    </li>

                                    <li :class="{ disabled: !pagination.hasNext }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                        <a  href="#nowhere" @click="jump('next')">›</a>
                                    </li>
                                    <li :class="{ disabled: pagination.last }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                        <a  href="#nowhere" @click="jump('last')"> »</a>
                                    </li>
                                </ul>
                            </div>
                            <div>分页跳转</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-warning addDiv">
                <div class="panel-heading">新增用户</div>
                <div class="panel-body">
                    <table class="addTable">
                        <tr>
                            <td>用户名</td>
                            <td><input  @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td>
                        </tr>
                        <tr>
                            <td>用户地址</td>
                            <td><input  @keyup.enter="add" v-model.trim="bean.address" type="text"
                                        class="form-control"></td>
                        </tr>

                        <tr class="submitTR">
                            <td colspan="2" align="center">
                                <a href="#nowhere"  @click="add" class="btn btn-success">添加</a>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
        </div> 
    </body>
    <script>
        //判断是否为空
        function checkEmpty(value,text){

            if(null==value || value.length==0){
                alert(text+ "不能为空");
                return false;
            }
            return true;
        }
        //确实是否要删除
        function checkDeleteLink(){
            var confirmDelete = confirm("确认要删除");
            if(confirmDelete)
                return true;
            return false;
        }

        //分页跳转函数，向前跳或者向后跳，或者跳转到第一页或者最后一页。
        function jump(page,vue){
            if('first'== page && !vue.pagination.first)
                vue.list(0);

            else if('pre'== page &&	vue.pagination.hasPrevious )
                vue.list(vue.pagination.number-1);

            else if('next'== page && vue.pagination.hasNext)
                vue.list(vue.pagination.number+1);

            else if('last'== page && !vue.pagination.last)
                vue.list(vue.pagination.totalPages-1);
        }
        //分页跳转函数，跳转到指定页
        function jumpByNumber(start,vue){
            if(start!=vue.pagination.number)
                vue.list(start);
        }
    </script>
</html>